<template>
  <div class="expDetails randomBg0">
    <Timeline>
      <TimelineItem v-for="(item, index) in collapse" :key="index">
        <div class="chapterName" :id="`panel-${item.id}`">
          <div class="exper_title_box display_justify">
            <Tooltip
              transfer
              :content="item.name"
              style="width: 95%"
              max-width="400"
            >
              <span
                class="text-ellipsis font_size_20"
                style="width: 100%; display: inline-block"
              >
                {{ item.name }}
              </span>
            </Tooltip>
            <div style="width: 8%">
              <span
                class="isHidden"
                @click="closeStyle(item.id, false, index)"
                v-if="item.isShow"
                >收起</span
              >
              <span
                class="isHidden"
                @click="closeStyle(item.id, true, index)"
                v-else
                >展开</span
              >
            </div>
          </div>

          <div
            v-for="(item2, index2) in item.courseexpchapterDtoList"
            :key="index2"
          >
            <div class="child_collapse">
              <Collapse
                :model-value="item.id"
                simple
                @on-change="(val) => changeC(val, item.id, index, index2)"
              >
                <Panel :name="item.id">
                  <Tooltip
                    transfer
                    :content="item2.name"
                    style="width: 95%"
                    max-width="400"
                  >
                    <span class="font_size_17 text-ellipsis" style="height: 40px;width: 100%">
                    {{ item2.name }}
                  </span>
                  </Tooltip>
                  <!-- <span class="font_size_17 text-ellipsis" style="height: 30px;width: 95%">
                    {{ item2.name }}
                  </span> -->
                  <template #content class="conten_display_box">
                    <div
                      v-for="(item3, index3) in item2.expOutDtoList"
                      :key="item3.id"
                      class="border_dashed"
                    >
                      <div class="mr_15 flex">
                        <div class="mr_rig_10">
                          <img
                            :src="handleImage(item3.topology)"
                            alt=""
                            width="80"
                            height="50"
                            :onerror="defaultImg1"
                          />
                        </div>
                        <div>
                          <div class="font_size_15">{{ item3.ecname }}</div>
                          <div class="display-flex">
                            <span>难度:</span>
                            <span>{{
                              handleDiffcult(item3.difficulty)
                            }}</span>
                            <Divider type="vertical" />
                            <span>可见范围:</span>
                            <span>{{ handleIsPublic(item3.isPublic) }}</span>
                            <Divider type="vertical" />
                            <span>创建时间:</span>
                            <span>{{ item3.createTime }}</span>
                            <Divider type="vertical" />
                            <span>课时:</span>
                            <span>{{ item3.hours }}</span>
                            <Divider type="vertical" />
                            <div class="display-flex">
                              <span>视频时长:</span>
                              <Tooltip
                                transfer
                                max-width="200"
                                :content="
                                  item3.videoDuration &&
                                  item3.videoDuration.length > 0
                                    ? getMilliSecond(item3.videoDuration[0])
                                    : '-'
                                "
                              >
                                <span
                                  class="text-ellipsis"
                                  style="width: 50px"
                                >
                                  {{
                                    item3.videoDuration &&
                                    item3.videoDuration.length > 0
                                      ? getMilliSecond(item3.videoDuration[0])
                                      : "-"
                                  }}
                                </span>
                              </Tooltip>
                            </div>
                            <Divider type="vertical" />
                            <div class="display-flex">
                              <span>设计师:</span>
                              <Tooltip
                                v-if="item3.designer"
                                transfer
                                max-width="200"
                                :content="item3.designer"
                              >
                                <span
                                  class="text-ellipsis"
                                  style="width: 50px"
                                >
                                  {{ item3.designer }}
                                </span>
                              </Tooltip>
                            </div>
                            <Divider type="vertical" />
                            <div class="display-flex">
                              <span>标签:</span>
                              <Tooltip
                                transfer
                                max-width="300"
                                :content="
                                  item3.labels == 'null' || !item3.labels
                                    ? '-'
                                    : item3.labels.replaceAll(';', ',')
                                "
                              >
                                <span
                                  class="text-ellipsis"
                                  style="width: 100px"
                                >
                                  {{
                                    item3.labels == "null" || !item3.labels
                                      ? "-"
                                      : item3.labels.replaceAll(";", ",")
                                  }}
                                </span>
                              </Tooltip>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="border_dashed" style="height: 30px">
                      <span class="nodeNum">
                        共{{ item2.expOutDtoList.length }}个
                      </span>
                    </div>
                  </template>
                </Panel>
              </Collapse>
            </div>
          </div>
        </div>
      </TimelineItem>
      <TimelineItem>
        <p class="floor_exp">全部课程课件</p>
      </TimelineItem>
    </Timeline>
  </div>
</template>

<script>
import $ from 'jquery'
import defaultImg from '@/assets/globalIcon/course.jpg'
import {getMilliSecond} from '@/libs/utils'
export default {
  name: 'treeCollapse',
  props: {
    collapse: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      defImg: defaultImg,
      getMilliSecond,
      defaultImg1: 'this.src="' + require('../../../assets/globalIcon/course.jpg') + '"',

    }
  },
  watch: {
  },
  mounted () {

  },
  methods: {
    changeC (val, id, index, index2) {
      // 按钮控制展开显示的，展开后，点击某个课件列表触发change ，还是有值回显
      const node = document.getElementById(`panel-${id}`)
      if (node) {
        const nodes = node.querySelectorAll('.ivu-collapse-content')
        const nodes2 = node.querySelectorAll('.ivu-collapse-header i')
        if (val[0]) {
          nodes[index2].style.display = 'block'
          nodes2[index2].style.transform = 'rotate(90deg)'
        } else {
          nodes[index2].style.display = 'none'
          nodes2[index2].style.transform = 'rotate(0deg)'
        }
      }
      if (val[0]) {
        this.collapse[index].isShow = true
      } else {
        this.collapse[index].isShow = false
      }
    },
    closeStyle (id,isShow,index) {
      const node = document.getElementById(`panel-${id}`)
      if (node) { 
        const nodes = node.querySelectorAll('.ivu-collapse-content')
        const nodes2 = node.querySelectorAll('.ivu-collapse-header i')
        for (let i = 0; i < nodes.length; i += 1) { 
          nodes[i].style.display = isShow ? 'block' : 'none'
          // 控制图标 但单独点击有问题
          nodes2[i].style.transform = isShow ? 'rotate(90deg)': 'rotate(0deg)'
        }
      }
      this.collapse[index].isShow = isShow
    },
     // 图片路径
    handleImage (logo) {
      let src = ''
      if (logo) {
        if (logo.indexOf('Learn') > -1) {
          src = logo
        } else {
          src = `/Learn/${logo}`
        }
      } else {
        src = this.defImg
      }
      return src
    },
    // 分享状态
    handleIsPublic (type) {
      if (type === 1 || type === '1') {
        return '单位'
      } else if (type === 0 || type === '0') {
        return '个人'
      } else if (type === 2 || type === '2') {
        return '系统'
      }
    },
     // 困难程度
    handleDiffcult (val) {
      switch (val) {
        case 'Simple':
          return '简单'
          break;
        case 'Medium':
          return '中等'
          break;
        case 'Hard':
          return '较难'
          break;
      }
    },
    // 序号
    handleNumber (val) {
      let str = ''
      switch (val) {
        case 1:
          str = '第一章'
          break;
        case 2:
          str = '第二章'
          break;
        case 3:
          str = '第三章'
          break;
        case 4:
          str = '第四章'
          break;
        case 5:
          str = '第五章'
          break;
        case 6:
          str = '第六章'
          break;
        case 7:
          str = '第七章'
          break;
        case 8:
          str = '第八章'
          break;
        case 9:
          str = '第九章'
          break;
        case 10:
          str = '第十章'
          break;
        case 11:
          str = '第十一章'
          break;
        case 12:
          str = '第十二章'
          break;
        case 13:
          str = '第十三章'
          break;
        case 14:
          str = '第十四章'
          break;
        case 15:
          str = '第十五章'
          break;
        case 16:
          str = '第十六章'
          break;
        case 17:
          str = '第十七章'
          break;
        case 18:
          str = '第十八章'
          break;
        case 19:
          str = '第十九章'
          break;
        case 20:
          str = '第二十章'
          break;
        default: srt = val
      }
      return str;
    },
  }
}
</script>

<style scoped>
/deep/ .ivu-tooltip-rel{
  width: 100% !important;
}
.display_justify {
  display: flex;
  justify-content: space-between;
}

.child_collapse .text-ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
}
.flex {
  display: flex;
}
.nodeNum {
  float: right;
  color: #0f7afe;
  font-size: 12px;
  height: 30px;
  line-height: 48px;
}
.exper_title_box {
  margin-bottom: 5px;
}
.exper_title_box .isHidden {
  font-size: 14px;
  float: right;
  cursor: pointer;
}
.floor_exp {
  margin-top: 5px;
}

.expDetails >>> .ivu-collapse {
  border: none !important;
}
.expDetails >>> .ivu-collapse-item {
  background-color: var(--table-tr-hover-color);
  margin: 10px 0px;
}
.expDetails >>> .ivu-collapse-header {
  border-bottom: 0px;
}

.expDetails >>> .ivu-collapse > .ivu-collapse-item > .ivu-collapse-header {
  height: 48px;
  line-height: 48px;
  border-bottom: 0px solid transparent;
  transition: all 0.2s ease-in-out;
}

.expDetails >>> .ivu-collapse-header .ivu-icon {
  float: right;
  font-size: 17px;
  margin-top: 16px;
}
.expDetails >>> .ivu-collapse-content {
  /* padding: 0px; */
  padding: 0 17px 17px;
}
.border_dashed {
  border-top: 2px dashed var(--divider-color);
}

.expDetails >>> .ivu-timeline-item-head-blue {
  border-color: #2d8cf0 !important;
  color: #2d8cf0;
}
.expDetails >>> .ivu-timeline-item-head {
  width: 18px;
  height: 18px;
  border: 4px solid transparent;
  top: 3px;
}
.expDetails >>> .ivu-timeline-item-tail {
  left: 8px;
  top: 4px;
  border-left: 2px dashed var(--divider-color);
}
</style>
<style scoped>
.font_size_15 {
  font-size: 15px;
}
.font_size_17 {
  font-size: 17px;
}
.font_size_20 {
  font-size: 20px;
}
.font_size_25 {
  font-size: 25px;
}

.mr_top_10 {
  margin-top: 10px;
}
.mr_top_15 {
  margin-top: 15px;
}
.mr_top_20 {
  margin-top: 15px;
}
.mr_bot_10 {
  margin-bottom: 10px;
}
.mr_bot_15 {
  margin-bottom: 15px;
}
.mr_bot_20 {
  margin-bottom: 20px;
}
.mr_rig_10 {
  margin-right: 10px;
}
.mr_rig_15 {
  margin-right: 15px;
}
.mr_rig_20 {
  margin-right: 20px;
}
.mr_left_10 {
  margin-left: 10px;
}
.mr_left_15 {
  margin-left: 15px;
}
.mr_left_20 {
  margin-left: 20px;
}

.mr_r_l_10 {
  margin: 0px 10px;
}
.mr_r_l_15 {
  margin: 0px 15px;
}
.mr_r_l_10 {
  margin: 10px 0px;
}
.mr_t_b_15 {
  margin: 15px 0px;
}
.mr_10 {
  margin: 10px;
}
.mr_15 {
  margin: 15px;
}
</style>

